<!--
 * @Author       : ly
 * @Date         : 2021-07-06 09:46:50
 * @LastEditors  : ly
 * @Description  : 树形递归调用
-->
<template>
  <li
    class="tree-item"
    :class="{
      expand: isExpand,
      'no-child': !treeItemData.children || treeItemData.children.length === 0,
    }"
  >
    <div
      :class="
        treeItemData.selectedItem ? 'tree-content actived' : 'tree-content'
      "
      @click="_clickEvent"
    >
      <!-- <div class="expand-arrow" @click.stop="expandTree()"></div> -->
      <div class="expand-arrow"></div>
      <div class="tree-label" :title="treeItemData.title">
        {{ treeItemData.title }}
      </div>
      <div
        v-auth:permission="`${permission}`"
        v-if="opList.includes('edit')"
        class="edit"
        @click.stop="op_click"
      >
        <medoIcon iconClass="edit" />
      </div>
      <div
        v-auth:permission="`${permission}`"
        v-if="opList.includes('del')"
        class="edit"
        @click.stop="op_click"
      >
        <medoIcon iconClass="delete" />
      </div>
    </div>
    <ul
      class="sub-tree"
      v-if="treeItemData.children && treeItemData.children.length > 0"
    >
      <!--TreeItem组件中调用TreeItem组件-->
      <TreeItem
        v-for="(item, index) in treeItemData.children"
        :tree-item-data="item"
        :key="index"
        :tree-click-event="treeClickEvent"
        :opList="opList"
        :edit-trigger="editTrigger"
        :permission="permission"
      ></TreeItem>
    </ul>
  </li>
</template>

<script>
  export default {
    name: 'TreeItem',
    props: {
      treeItemData: {
        type: Object,
        default() {
          return {}
        },
      },
      // 节点点击事件
      treeClickEvent: {
        type: Function,
        default() {
          return function () {}
        },
      },
      // 节点操作点击事件
      editTrigger: {
        type: Function,
        default() {
          return function () {}
        },
      },
      // 操作列表
      opList: {
        type: Array,
        default: () => [],
      },
      // 权限判断
      permission: {
        type: String,
        default: () => '',
      },
    },
    data() {
      return {
        // 节点是否展开
        isExpand: this.treeItemData.expand || false,
      }
    },
    mounted() {
      console.log(this.opList)
    },
    methods: {
      // 展开/收缩
      expandTree(flag) {
        if (
          !this.treeItemData.children ||
          this.treeItemData.children.length === 0
        ) {
          return
        }
        if (typeof flag === 'undefined') {
          flag = !this.isExpand
        } else {
          flag = !!flag
        }
        this.isExpand = flag
      },
      // 创建一个唯一id
      uuid() {
        let str = Math.random().toString(32)
        str = str.substr(2)
        return str
      },
      // 节点点击事件
      _clickEvent() {
        this.expandTree()
        // 如果有传递事件函数，则调用事件函数并传递当前节点数据及组件
        if (this.treeClickEvent && typeof this.treeClickEvent === 'function') {
          this.treeClickEvent(this.treeItemData, this)
        }
      },
      op_click() {
        if (this.editTrigger && typeof this.editTrigger === 'function') {
          this.editTrigger(this.treeItemData, this)
        }
      },
    },
  }
</script>

<style lang="less" scoped>
  .tree-item {
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    .tree-content {
      position: relative;
      padding: 12px 0;
      padding-left: 45px;
      border-bottom: 1px solid #eee;
      &:hover {
        color: @primary-color;
        background-color: #e6fffb;
      }
    }
    .expand-arrow {
      position: absolute;
      top: 50%;
      left: 24px;
      width: 16px;
      height: 16px;
      cursor: pointer;
      transform: translateY(-50%);
      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        margin: -5px 0 0 -2.5px;
        content: ' ';
        border-color: transparent;
        border-style: solid;
        border-width: 5px;
        border-left-color: #ccc;
        transition: all 0.4s;
      }
    }
    &.expand {
      & > .tree-content {
        // background-color: #47ba8e;
        // color: #fff;
        & > .expand-arrow {
          &::after {
            margin: -2.5px 0 0 -5px;
            transform: rotate(90deg);
          }
        }
      }
    }
    .tree-label {
      width: 200px;
      height: 28px;
      overflow: hidden;
      font-size: 14px;
      line-height: 28px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .edit {
      position: absolute;
      top: 40%;
      right: 30px;
      width: 16px;
      height: 16px;
      cursor: pointer;
      transform: translateY(-50%);
      &:hover {
        color: @disabled-color;
      }
    }
    .sub-tree {
      display: none;
      padding: 0 0 0 28px;
      margin: 0;
      list-style: none;
    }
    &.expand > .sub-tree {
      display: block;
    }
    &.no-child {
      & > .tree-content {
        /* padding-left: 0; */
        & > .expand-arrow {
          display: none;
        }
      }
    }

    .actived {
      color: @primary-color;
      background-color: @primary-1;

      /* &:hover {
        // background-color: #47ba8e;
        background-color: @primary-1;
        color: @primary-color;
      } */
    }
  }
</style>
